<template>
    <div class="label-main">
      <!--gutter 表示间隔-->
      <el-row :gutter="10">
       <el-col :md="6" :sm="24" :xs="24" v-for="category in data" :key="category" >
         <el-card shadow="hover">
           <div slot="header" class="clearfix">
             <span>{{category.name}}</span>
           </div>
           <div >
             <nuxt-link :to="{path:`/label/${label.id}`,query:{name:label.name}}"
                        v-for="label in category.labelList" :key="label.id" >
               <el-tag size="small">{{label.name}}</el-tag>
             </nuxt-link>
           </div>
         </el-card>
       </el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        async asyncData({app}){
          const {data} = await app.$getCategoryLabelList();
          return {data}
        }
    }
</script>

<style scoped>
  .label-main{
    margin: 20px 10px;
  }
  .el-col {
    margin-bottom: 20px;
  }
  .el-tag {
    margin: 5px;
  }
  .el-tag:hover {
    border-bottom: 1px solid #345DC2;
  }
  .el-card {
    height: 200px;
  }
</style>
